<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        P{
            width: 200px;
            margin: 100px auto;
        }
        body .self-class .layui-layer-title{
            background:#c00;
            color:#fff;
            border: none;
        }
        body .self-class .layui-layer-btn{
            border-top:1px solid #E9E7E7
        }
        body .self-class .layui-layer-btn a{
            background:#333;
        }
    </style>
</head>
<body>
    layer 弹窗可以直接使用，不需要带layui前缀
    <p class="text">hello world</p>
    
    <script src="../lib/layui/layui.all.js"></script>
    <script>
        /*
        layer 使用两种方式：
            1. layer.open({配置参数})
            2. layer 的快捷方式  msg() ...
            3. layer.config({配置参数}) 全局配置，对所有的弹窗起作用
            4. layer方法返回index是弹窗的标识，可以通过 layer.close(layer弹窗的返回值) 关闭弹窗   layer.closeAll() 关闭所有
        layui 携带了简化的 jquery   var $ = layui.$ 
        */

        var $ = layui.$;
        console.log(layer);
        console.log($('.text'));
        layer.config({
            time: 4000
        })

        /*
            layer.alert("信息" / 信息, {配置}, 回调)
            layer.confirm("询问" [配置, yes, cancel] )
            layer.msg("提示" [ 配置, 回调])
            layer.load([风格1, 2])
        */

        layer.open({
            type: 1,
            content: '经历了',
            offset: 'auto'
        })
        layer.open({
            // type: 4,
            type: 1,
            // type: -1,
            // title: '请选择',
            // content: 'hello world',
            // content: '<p>大河向东流</p>',
            content: $('.text'),
            // 当为tips层时，[type: 4 -> "提示的内容", 绑定的DOM元素]
            // content: ['我吸附你了', $('.text')],
            // tips: [3, '#f00'],
            offset: 'lt',
            // area: '500px',
            // area: ['500px', '400px']
            // skin: 'self-class',
            // skin: 'layui-layer-lan',
            // icon: 2,
            btn: ['喜欢', '不喜欢', '我也不知道'], // btn 按钮除了第一个，其它都会自动关闭弹窗
            yes(index, layero){
                console.log('滚');
                // index 参数表示layer弹窗的表示 layer.close(index)
                console.log(index);
                // layero参数表示当前弹窗的jQ对象
                console.log(layero[0]);
                // layer.close(index);
                layer.closeAll()
            },
            btn2(index){
                console.log('爽了？');
            },
            btn3(index){
                console.log('舒服了？');
            },
            // btnAlign: 'l', // btn按钮的排列
            // closeBtn: 2,
            // shade: [.5, '#f00'],
            // shade: false,
            // time: 2000,
            // anim: 4,
            // maxmin: true,
        })
    </script>
</body>
</html>